<template>
	<div class="goods-item" @click="itemClick">
		<img :src="product.cover_url" alt="book-picture">
		<div class="goods-info">
			<p>{{ product.title }}</p>
			<span class="price">&yen;{{ product.price }}</span>
			<span class="collection">收藏:{{ product.collects_count }}</span>
		</div>
	</div>
</template>
<!--展示详细商品信息-->
<script>
import {useRouter} from 'vue-router'
import router from "@/router";

export default {
	name: "GoodsItem.vue",
	props: {
		product: {
			type: Object,
			default() {
				return {}
			}
		}
	},
	setup(props) {
		// 商品单击事件
		const itemClick = () => {
			router.push({path: 'detail', query: {id: props.product.id}})
		}
		return {
			itemClick
		}
	}
}
</script>

<style scoped>
.goods-item {
	width: 45%;
	padding-bottom: 40px;
	position: relative;
	
}

.goods-info {
	font-size: 12px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 5px;
	overflow: hidden;
}

.price {
	color: red;
	font-size: 20px;
	margin-right: 20px;
}

.collection {
	position: relative;
}

.collection::before {
	content: '';
	position: absolute;
	left: -15px;
	top: -1px;
	width: 14px;
	height: 14px;
	/*background: url("../../../../assets/images/collect.png")0 0/14px 14px;*/
	background: url("~assets/images/collect.png") 0 0/14px 14px;
	
}

p {
	overflow: hidden; /*标题超出隐藏*/
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 3px;
}

img {
	width: 100%;
	border-radius: 5px;
}

</style>